By Alligator.io

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Storybook is a tool that allows to test an app’s components in isolation and in a flat hierarchy. A storybook is a series of stories that display our components with specified inputs and outputs in a nice browser view.

Storybook has been getting really popular for React projects, and support for Angular and Vue projects was added with v3.3.0 so we can now just as easily use it for creating stories for Angular components.

Let’s quickly go over setting up Storybook for Angular as well as basic usage.

Storybook now comes with a CLI tool that makes it really easy to add it to a project. First, install the @storybook/cli package globally:

Now, in the root of an Angular project, run the getstorybook command:

This command will autodetect that it’s an Angular project and will add the necessary configurations, devDependencies and npm scripts.

For example, at the time of this writing, the following devDependencies are added to the project:

And the following npm scripts are also added to the project’s package.json file:

You can now try it out by invoking the storybook npm script:

This will start a local webpack server on port 6006 and you can visit the generated storybook by going to http://localhost:6006/. What you’ll see is an example Storybook that was generated from an index.stories.ts file under a stories folder at the root of the project. Here’s what the generated Storybook looks like:

The local server is equiped with webpack’s Hot Module Replacement (HMR) so changes to your stories will be reflected automatically in your generated storybook.

You can have a look at the generated sample stories in /stories/index.stories.ts for an example of the syntax and API.

Let’s now create a simple Card component and a few stories for it to give you an overview of Storybook’s usage. Here’s our component’s template:

And here’s our component’s class:

As you can see, it’s a very simple component that uses a few inputs and one output. We’re also making use of the :host selector to style our component’s shell.

Now let’s modify index.stories.ts to add a few stories for our card component:

Here are a few things to note:

See this page for a list of other addons that can be used with Storybook.

For this example, I wanted the global styles of my Angular app to be reflected in the generated Storybook. It’s as simple as adding a file called preview-head.html in the .config folder that’s added by Storybook to the root of the project. In that file, you can add anything that would go into the head of a document. So let’s add our global styles:

It’s easy to generate a Storybook with static files that can be deployed to a static hosting service like Github pages. This allows to host a Storybook that other members of the team can easily consult.

Simply invoke the build-storybook npm script:

It’ll generate a storybook-static folder at the root of the project with all the files ready to be uploaded to your static hosting service of choice. You can also try it out locally using npx and http-server:

📙 The End! Read more about Storybook’s usage in the official docs.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us

author

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!